<template>
  <Header></Header>
  <div class="course-filter">
    <div class="filter-main">
      <div class="filter-item">
        <div class="item-title">课程方向：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li
            v-for="item in firstList"
            :key="item.id"
            @click="evtFirst(item.id)"
            :class="currentId == item.id ? 'filter-all' : ''"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <div class="filter-item">
        <div class="item-title">课程分类：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li
            v-for="item in secondList"
            :key="item.id"
            @click="evtSecond(item.id)"
            :class="currentId == item.id ? 'filter-all' : ''"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <div class="filter-item">
        <div class="item-title">课程难度：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li
            v-for="item in levelList"
            :key="item.id"
            @click="evtLevel(item.id)"
            :class="currentId == item.id ? 'filter-all' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="course-list">
    <div class="list-main">
      <div class="list-t">
        <ul>
          <li
            v-for="item in courseFilter"
            :key="item.id"
            :class="item.id != 4 ? 'line' : ''"
            @click="evtFilter(item.id, item.status)"
          >
            <span :class="currentIdx == item.id ? 'active' : ''">{{
              item.name
            }}</span>
            <div class="caret" v-if="item.id == 4">
              <el-icon
                :size="8"
                :color="item.status == 'price-desc' ? '#2c81ff' : ''"
                ><CaretTop
              /></el-icon>
              <el-icon
                :size="8"
                :color="item.status == 'price-asc' ? '#2c81ff' : ''"
                ><CaretBottom
              /></el-icon>
            </div>
          </li>
        </ul>
        <div>
          <el-radio-group v-model="radio" @change="tabCourse">
            <el-radio label="1">免费课程</el-radio>
            <el-radio label="2">会员免费课程</el-radio>
          </el-radio-group>
        </div>
      </div>
      <ul class="list-c">
        <li
          v-for="item in courseList"
          :key="item.id"
          @click="goDetail(item.id)"
        >
          <img :src="item.courseCover" alt="" />
          <div class="course-content">
            <h3>{{ item.courseName }}</h3>
            <div>
              {{ courseTypeFn(item.courseLevel) }} · {{ item.clicks }}人报名
            </div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <div class="price-total">￥ 299</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="list-b">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="courseTotal"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>
<script setup>
import Header from "@/components/common/Header.vue";
import Footer from "@/components/common/Footer.vue";
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";
import courseType from "@/mixins/courseType.js";
let { courseTypeFn } = courseType();
import {
  getFirstCategorys,
  getSecondCategorys,
  courseSearch,
} from "@/utils/api/course";
import { onBeforeMount, ref } from "vue";
// 一级分类
let firstList = ref([]);
// 二级分类
let secondList = ref([]);
// 课程
let courseList = ref([]);
// 课程总数量
let courseTotal = ref(0);
// 难度列表
let levelList = ref([
  { name: "初阶", id: 1 },
  { name: "中阶", id: 2 },
  { name: "高阶", id: 3 },
]);
// 查询课程的参数
let courseParams = reactive({
  pageNum: 1,
  pageSize: 8,
  entity: {
    firstCategory: "",
    secondCategory: "",
    courseLevel: "",
    sortBy: "",
    isMember: "",
    isFree: "",
  },
});
// 课程条件
let courseFilter = ref([
  { name: "综合", id: 1 },
  { name: "最新课程", id: 2 },
  { name: "最多购买", id: 3 },
  { name: "价格", id: 4, status: "" },
]);
// 控制class切换
let currentIdx = ref(1);
// 免费课程和会员课程筛选
const radio = ref(3);
// 切换class
let currentId = ref(null);
// 生命周期
onBeforeMount(() => {
  // 获取一级分类
  getFirstCategorys().then((res) => {
    firstList.value = res.data.list;
  });
  // 获取二级分类
  secondCategorys({
    categoryId: -1,
  });
  // 查询课程
  getCourseSearch(courseParams);
});
// 获取二级分类
const secondCategorys = (params) => {
  getSecondCategorys(params).then((res) => {
    secondList.value = res.data.list;
  });
};
// 查询课程
const getCourseSearch = (params) => {
  courseSearch(params).then((res) => {
    courseList.value = res.data.pageInfo.list;
    courseTotal.value = res.data.pageInfo.total;
  });
};
// 点击一级分类
const evtFirst = (id) => {
  currentId.value = id;
  // 获取二级分类
  secondCategorys({
    categoryId: id,
  });
  // 查询课程
  courseParams.entity.firstCategory = id;
  courseParams.entity.secondCategory = "";
  courseParams.entity.courseLevel = "";
  courseParams.entity.isMember = "";
  courseParams.entity.isFree = "";
  getCourseSearch(courseParams);
};
// 点击二级分类
const evtSecond = (id) => {
  currentId.value = id;
  courseParams.entity.secondCategory = id;
  courseParams.entity.courseLevel = "";
  courseParams.entity.isMember = "";
  courseParams.entity.isFree = "";
  getCourseSearch(courseParams);
};
// 点击课程难度
const evtLevel = (id) => {
  currentId.value = id;
  courseParams.entity.courseLevel = id;
  getCourseSearch(courseParams);
};
//  点击课程筛选
const evtFilter = (id, status) => {
  currentIdx.value = id;
  if (id == 1) {
    courseParams.entity.sortBy = "";
    courseFilter.value[3].status = "";
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
  } else if (id == 2) {
    courseParams.entity.sortBy = "time-desc";
    courseFilter.value[3].status = "";
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
  } else if (id == 3) {
    courseParams.entity.sortBy = "clicks-desc";
    courseFilter.value[3].status = "";
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
  } else if (id == 4) {
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
    if (status == "price-desc" || status == "") {
      courseFilter.value[3].status = "price-asc";
      status = "price-asc";
    } else {
      courseFilter.value[3].status = "price-desc";
      status = "price-desc";
    }
    courseParams.entity.sortBy = status;
  }
  getCourseSearch(courseParams);
};
const tabCourse = (val) => {
  if (val == "1") {
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "1";
  } else if (val == "2") {
    courseParams.entity.isFree = "";
    courseParams.entity.isMember = "1";
  }
  getCourseSearch(courseParams);
};
const currentChange = (val) => {
  courseParams.pageNum = val;
  getCourseSearch(courseParams);
};
let router = useRouter();
// 跳转到课程详情页
const goDetail = (id) => {
  router.push({
    path: "/course/detail",
    query: { id },
  });
};
</script>
<style scoped>
.course-filter {
  width: 100%;
  height: 232px;
  background-color: #f3f5f9;
}
.filter-main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 1000px;
  height: 212px;
  margin: 0 auto;
  padding: 10px 0;
}
.item-title {
  float: left;
  width: 90px;
  margin-top: 9px;
  margin-left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.filter-item ul {
  display: flex;
  flex-wrap: wrap;
}
.filter-item ul li {
  padding: 0 3px;
  line-height: 30px;
  margin-right: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #515759;
  cursor: pointer;
}
.filter-item ul li.filter-all {
  text-align: center;
  color: #388fff;
  font-size: 14px;
  background-color: rgba(44, 128, 255, 0.1);
  border-radius: 5px;
}
.course-list {
  padding: 30px 0;
  background-color: #fff;
}
.list-main {
  width: 1000px;
  margin: 0 auto;
}
.list-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.list-t ul {
  display: flex;
}
.list-t ul li {
  display: flex;
  align-items: center;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #515759;
  cursor: pointer;
}
.list-t ul li + li {
  margin-left: 16px;
}
.list-t ul li.line {
  position: relative;
}
.list-t ul li.line:after {
  content: "";
  position: absolute;
  right: -16px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #d8d9d9;
}
.list-t ul li .active {
  color: #2c81ff;
}
.caret {
  display: flex;
  flex-direction: column;
}
.list-c {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list-c li {
  float: left;
  width: 240px;
  height: 275px;
  margin-top: 38px;
  background-color: #fff;
  box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
  border-radius: 5px;
}
.list-c li:last-child:nth-child(4n + 2) {
  margin-right: calc((100% - 240px) / 3 * 2);
}
.list-c li:last-child:nth-child(4n + 3) {
  margin-right: calc((100% - 240px) / 3 * 2);
}
.list-c li img {
  width: 240px;
  height: 153px;
}
.course-content {
  padding: 7px 16px;
}
.course-content h3 {
  font-size: 12px;
  color: #333333;
}
.course-content > div {
  padding: 7px 0;
  font-size: 12px;
  color: #808080;
}
.price {
  display: flex;
  line-height: 16px;
}
.price-vip {
  width: 64px;
  height: 16px;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
  border-radius: 16px 0 16px 0;
}
.price-total {
  font-size: 12px;
  color: #ff727f;
}
.list-b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
</style>
